<template>
    <!-- 添加/修改靓号信息的表单弹框组件 -->
    <Dialog :title="dialogConfig.title" :buttons="dialogConfig.buttons" :show="dialogConfig.show"
        @close="dialogConfig.show = false" :width="'400px'">
        <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="60px">
            <el-form-item label="邮箱" prop="email">
                <el-input :maxLength="50" v-model.trim="formData.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="靓号" prop="userId">
                <el-input :maxLength="11" v-model.trim="formData.userId" placeholder="请输入靓号" />
            </el-form-item>
        </el-form>
    </Dialog>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const dialogConfig = reactive({
    show: false,
    title: "编辑靓号",
    buttons: [
        {
            type: "primary",
            text: "确定",
            click: (e) => {
                submitData();
            },
        },
    ],
});

const validateNumber = (rule, value, callback) => {
    if (!proxy.Verify.checkNumber(value)) {
        callback(new Error('靓号只能是数字'))
    }
    else {
        callback();
    }
}

const validateEmail = (rule, value, callback) => {
    if (!proxy.Verify.checkEmail(value)) {
        callback(new Error('请输入正确的邮箱'))
    }
    else {
        callback();
    }
}

const formData = ref({ updateDescList: [] })
const formDataRef = ref()
const rules = {
    email: [
        { required: true, message: '请输入邮箱' },
        { validator: validateEmail, message: '请输入正确的邮箱' }
    ],
    userId: [
        { required: true, message: '请输入靓号' },
        { min: 11, max: 11, message: '靓号必须11位' },
        { validator: validateNumber, message: '靓号只能是数字' }
    ]
}

const emit = defineEmits(['reload'])
const submitData = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        let params = {}
        Object.assign(params, formData.value)
        let result = await proxy.Request({
            method: 'post',
            url: proxy.Api.saveBeauty,
            params
        })
        if (!result) {
            return
        }
        proxy.Message.success('操作成功')
        dialogConfig.show = false
        emit('reload')
    })
}

const show = (data = {}) => {
    dialogConfig.show = true
    nextTick(() => {
        formDataRef.value.resetFields()
        formData.value = Object.assign({}, data)
    })
}
defineExpose({
    show,
});
</script>

<style lang="scss" scoped></style>
